<template>
  <div class="home">
    <div class="slider">
      <div class="block">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in sliderList" :key="item.id">
            <a href="#" class="link-wrap">
              <img src="/static/images/slider1.png" alt="..." width="1920"/>
            </a>
          </el-carousel-item>
        </el-carousel>

        <div class="loading-wrap">
          <loading v-show="!sliderList.length"></loading>
        </div>
      </div>
    </div>

    <div class="content g-mt15">
      <div class="w990p10 clearfix">
        <el-row class="body">
          <el-col :md="17" :sm="15" :xs="24" class="news">
            <div class="title">
              <h4>大标题</h4>
              <a href="#" class="link">
                <i class="el-icon-plus"></i>
                更多
              </a>
            </div>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" class="g-mt20">
              <el-tab-pane v-for="(item, index) in tabNewList" :key="item.id" :label="item.title" :name="item.title" class="new-list">
                <ul class="clearfix new-list-wrap">
                  <li class="new-item" v-for="(news, index) in item.content" v-if="index <= 7">
                    <a href="#" class="link">
                      {{ news.title }}
                    </a>
                    <span class="date">
                      {{ news.date }}
                    </span>
                  </li>
                </ul>

              </el-tab-pane>
            </el-tabs>
          </el-col>

          <el-col :md="6" :sm="9" :xs="24" class="report" :offset="1">
            <div class="title g-mb15">
              <h4>快速通道</h4>
              <a href="#" class="link">
                <i class="el-icon-plus"></i>
                更多
              </a>
            </div>
            <div class="report-list">
              <ul class="clearfix report-list-wrap">
                <li class="report-item" v-for="item in reportList">
                  <a href="#" class="link">
                    <span>{{ item.title }}</span>
                    <i class="tail_triangle"></i>
                    <i class="head_triangle"></i>
                  </a>
                </li>
              </ul>

            </div>
          </el-col>
        </el-row>

        <!--<el-row class="foot g-mt15">-->
          <!--<el-col :md="12" :sm="12" :xs="24" class="others-server">-->
            <!--<div class="title">-->
              <!--<h4>其他服务</h4>-->
              <!--<a href="#" class="link">-->
                <!--<i class="el-icon-plus"></i>-->
                <!--更多-->
              <!--</a>-->
            <!--</div>-->
            <!--<div class="button-wrap g-mt20">-->
              <!--<el-button type="primary" v-for="(item, index) in fastClickList" :key="item.id">-->
                <!--<i :class="fastClickButton[index]"></i>-->
                <!--<a href="#" class="link" style="color: #fff">主要按钮</a>-->
              <!--</el-button>-->
            <!--</div>-->
          <!--</el-col>-->

          <!--<el-col :md="8" :sm="6" :xs="24" class="min-slider g-mt10" :offset="4">-->
            <!--<div class="title">-->
              <!--<h4>小型幻灯片</h4>-->
              <!--<a href="#" class="link">-->
                <!--<i class="el-icon-plus"></i>-->
                <!--更多-->
              <!--</a>-->
            <!--</div>-->
            <!--<div class="min-slider-wrap g-mt20">-->
              <!--<el-carousel :interval="4000" type="card" height="100px">-->
                <!--<el-carousel-item v-for="item in minSliderList" :key="item.id" class="slide-item">-->
                  <!--<img :src="item.picUrl" alt="..." />-->
                <!--</el-carousel-item>-->
              <!--</el-carousel>-->
            <!--</div>-->
          <!--</el-col>-->
        <!--</el-row>-->
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import {ERR_OK} from 'api/config'
  import axios from 'axios'

  export default {
    props: {

    },
    data() {
      return {
        activeName2: 0,
        months: {
          "2": "Mar"
        },
        sliderList: [],
        tabNewList: {},
        reportList: []
      }
    },
    created() {
      this.getIndexData()
    },
    components: {
      Scroll,
      Loading
    },
    methods: {
      getIndexData () {
        axios.get('/api/getIndexData').then((res) => {
          if (res.data.code === ERR_OK) {
            setTimeout(() => {
              let data = res.data.data
              this.sliderList = data.sliderList
              this.tabNewList = data.tabNewList
              this.activeName2 = data.tabNewList[0]['title']
              this.reportList = data.reportList
              this.fastClickList = data.fastClickList
              this.minSliderList = data.minSliderList
            }, 1000)
          }
        }).catch(err => {
          console.log(err)
        })
        return null
      },
      handleClick(tab, event) {
        console.log(tab, event)
      }
    },
    watch: {

    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .home
    .w990p10
      background-color: #fff
    .slider
      position: relative
      .link
        img
          width: 100%
      .loading-wrap
        ltp(0, 0)
        wh(100%, 100%)
        background-color: rgba(0,0,0,.4)
    .content
      div.title, h4
        position: relative
        hh(40px)
        padding-left: 15px
        border-bottom: 1px solid #eee
        sc($font-large-x, $back)
        background: url('./title.gif') no-repeat 0 center
        &:first-letter
          margin-right: 5px
          font-size: 30px
          color: $vice-color
          font-weight: bold
        .link
          rtp(0,0)
          sc($font-small, $vice-color)
          i
            font-size: $font-medium
            font-weight: bold
          &:hover
            text-decoration: underline
      .news
        position: relative
        .new-list
          position: relative
          min-height: 300px
          padding-bottom: 60px
          .new-pic
            font-size: 0
            img
              width: 100%
          .new-list-wrap
            li.new-item
              position: relative
              hh(34px)
              margin-top: 5px;
              border-bottom: 1px solid #ccc
            a.link
              display: block
              margin-right: 80px
              no-wrap()
              sc($font-small-x, $back)
              &:hover
                text-decoration: underline
                color: $vice-color
            span.date
              rtp(0, 0)
              sc($font-small, #ccc)
          .loading-more
            rbp(10px, 20px)
            wh(20px, 20px)
            line-height: 20px
            background-color: $vice-color
            sc($font-size-large-x, $white)
            text-align: center
            br(50%)
      .report
        .report-list
          position: relative
          padding-bottom: 60px
          height: 384px
          ul.report-list-wrap
            position: absolute
            left: 0
            top: 19px
            bottom: 60px
            wh(100%, auto)
            overflow: hidden
            li.report-item
              position: relative
              height: 40px
              margin-top: 14px
              transition: .4s ease
              &:first-child
                margin-top: 0
              span.title
                ltp(0, 0)
                wh(38px, 38px)
                text-align: center
                background-color: $vice-color
                em
                  wh(22px, 22px)
                  display: block
                  padding: 6px
                  line-height: 12px
                  background-color: $vice-color
                  border: 2px solid $white
                  font-weight: bold
                  color: $white
              a.link // .step
                display: block
                padding: 0 40px 0 40px
                margin-left: 20px
                hh(40px)
                color: $white
                &:hover
                  text-decoration: underline
                span
                  display: block
                  background-color: $vice-color
                  no-wrap()
                i.head_triangle
                  position:absolute;
                  z-index: 99
                  top:0;
                  right:1px;
                  width:0;
                  height:0;
                  border:20px solid transparent;
                  border-left-color: $vice-color
                i.tail_triangle
                  position:absolute;
                  left:20px;
                  top:0;
                  width:0;
                  height:0;
                  border:20px solid $vice-color;
                  border-left-color:transparent
              &:hover
                left: 5px
          .loading-more
            rbp(10px, 20px)
            wh(20px, 20px)
            line-height: 20px
            background-color: $vice-color
            sc($font-size-large-x, $white)
            text-align: center
            br(50%)
          .dot
            lbp(20px, 20px)
            padding: 6px 0
            font-size: 0
            span
              display: inline-block
              wh(5px, 5px)
              margin: 0 5px
              border: 1px solid $back
              background-color: $white
              cursor: pointer;
              br(50%)
              &:hover
                background-color: $vice-color
                border-color: $main-color
              &.active
                background-color: $vice-color
                border-color: $main-color
      .foot
        padding: 20px 0
        .others-server
          margin-top:9px
          button
            margin: 5px 12px
        .min-slider
          text-align: left
          .slide-item
            background-color: $vice-color
            img
              wh(100%, 100%)
</style>
